<template>
    <div v-loading="loading">
        <div style="margin: 20px 0;color: 666;font-weight: 700;">
            {{ nikename }}上传的相册
        </div>
        <el-card>
            <div slot="header">
                <el-row>
                    <el-col :span="14" style="display:flex;align-items:center"></el-col>
                    <el-col :span="10">
                        <div class="flex align-center">
                            <el-popconfirm @confirm="hardDel" title="确定要删除这些图片吗？">
                                <el-button size="small" slot="reference" style="margin-left: 10px;"
                                    type="danger">批量删除</el-button>
                            </el-popconfirm>
                            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small"  style="margin-left: 10px;" type="primary">刷新</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div>
                <el-alert :closable="false" center show-icon title="暂无数据" type="info" v-if="data.length <= 0" />
                <el-row :gutter="5">
                    <div class="pb-10">
                        <el-checkbox-group :max="99" v-model="urls">
                            <el-col :key="index" :span="4" style="margin-top:4px" v-for="(item, index) in data">
                                <el-card :body-style="{ padding: '5px' }">
                                    <el-image :preview-src-list="[item.url]" :src="item.url" :z-index="999" fit="contain"
                                        style="width: 100%;height: 100px" />
                                    <div>
                                        <div class="pd-10">
                                            <!-- <el-tag title="item.name" type="info">{{item.name}}</el-tag> -->
                                            <a :title="item.name" class="text-line1 font-12">{{ item.name }}</a>
                                        </div>
                                        <el-checkbox :label="item.id" class="material-name">选择</el-checkbox>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-checkbox-group>
                    </div>
                </el-row>
            </div>
        </el-card>
          <!-- 分页组件 -->
          <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
<script>

import initData from '@/mixins/index'
export default {
    name:"album-list",
    mixins: [initData],
    components: {
    },
    data() {
        return {
            query: {
                user_id: '',
                page: 1,
                size: 30
            },
            nikename: '',
            visible: false,
            loading: false,
            disable: false,
            images: [],
            urls: [],
            statusList: [
                {
                    name: "未删除",
                    value: 0
                },
                {
                    name: "已删除",
                    value: 2
                },
            ]
        }
    },
    mounted() {
        //this.getworksList()
        if (this.$route.query.user_id) {
            this.query.user_id = this.$route.query.user_id
            this.nikename = this.$route.query.nikename
            this.$nextTick(() => {
                this.beforeInit()
            })
        }
    },
    methods: {
        beforeInit() {
            this.url = "/user/user-album/index"
            this.init() //重新请求数据
        },
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },
        getdatas() {
            let that = this
            this.loading = true
            this.$request.get('/user/user-album/index', this.query).then((res) => {
                console.log(res)
                that.images = res.items
                that.loading = false
            }).catch((error) => {
                this.loading = false
            });
        },

        hardDel(id) {
            console.log('this', this.urls)
            if (this.urls.length == 0) {
                this.$message.warning("请选择图片！");
                return
            }
            this.$request.post('/user/user-album/delete', { ids: this.urls }).then((res) => {
                this.$message.success('删除成功')
                this.init() //重新请求数据
            })
        },
    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}

.flex {
    display: flex;
}
</style>